.mui-table-wrapper {
    width: 100%;
    height: 100%;

    .table-box {
        width: 100%;
        height: 100%;
        position: relative;

        &.table-with-pagination {
            height: calc(100% - 48px);
        }

        .mui-table {
            border-radius: 0;
            box-shadow: none;
            border: 1px solid #F2F3F5;
            // transition: all 0.2s linear;

            .MuiTable-root {
                table-layout: unset;
            }

            .MuiTableCell-head {
                background-color: #F2F3F5FF;
                padding: 4px 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &:not([rowspan]):not([colspan]) {
                    height: 40px;
                }

                &[rowspan][colspan] {
                    height: 33px;
                }
            }

            .MuiTableCell-body {
                height: 40px;
                padding: 4px 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all !important;
            }


            // 拖拽表格的样式
            &.resize-table {
                position: absolute !important;
                width: auto !important;
                max-width: 100% !important;

                &>div {
                    position: unset !important;
                    width: auto !important;
                    // max-width: 100% !important;
                    // overflow: auto;
                }

                .MuiTable-root {
                    max-width: 100%;
                    // width: fit-content;
                    width: auto;
                }

                .react-resizable {
                    position: relative;
                    overflow: visible !important;

                    &>div {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: keep-all;
                    }
                }

                .react-resizable-handle {
                    position: absolute;
                    z-index: 1;
                    // z-index: 999;
                    top: 8px;
                    right: 0px;
                    width: 6px;
                    height: calc(100% - 16px);
                    cursor: col-resize;
                    border-right: 1px solid #E5E6EB;
                    // border-right: 1px solid red;

                    &:hover {
                        border-color: pink;
                    }

                    &.active {
                        border-color: pink;
                        z-index: 999;
                    }
                }

                .ofs-table-row {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    overflow: hidden;
                }

                .ofs-table-cell-wrapper {
                    width: 100%;
                    overflow: hidden;
                }

                .ofs-table-cell {
                    // padding: 0 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

            }
        }
    }

    .table-sort-box {
        flex-direction: column;
        font-size: 8px;
        color: #C9CDD4FF;
        width: 16px;
        align-items: flex-end;
        cursor: pointer;

        .react-svg.active {
            color: pink;
            // color: var(--colorPrimary);
        }
    }
}

.table-selected-row {
    .MuiTableCell-root {
        background-color: pink;
    }
}